<template>
  <div class="sort-list-container">
    <div class="sort-list-container">
        <GoodsItem  v-for="good in goodList" :key="good.id" :good="good"/>
        <!-- 加载更多组件 -->
    </div>
         <XtxInfiniteLoad
          @load="loadNextPage"
          :isLoading="isLoading"
          :isFinished="isFinished" />
  </div>
</template>
<script>
import { findSubCategoryGoods } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch, inject } from 'vue'
import GoodsItem from '@/views/Category/components/goods-items'
import XtxInfiniteLoad from '@/components/InfiniteLoad'
export default {
  name: 'SubList',
  components: {
    GoodsItem,
    XtxInfiniteLoad
  },
  setup () {
    const goodList = ref([])
    const route = useRoute()
    const filterData = inject('filterData')
    // 加载下一页
    const isLoading = ref(false) // 是否在加载中
    const isFinished = ref(false) // 是否全部加载完毕
    // 请求参数
    let reqParams = {
      page: 1,
      pageSize: 20,
      categoryId: route.params.id,
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    }
    async function loadData () {
      // 加载首页数据时 把上拉加载功能关闭
      isLoading.value = true
      const res = await findSubCategoryGoods(reqParams)
      //   console.log(res)
      goodList.value = res.result.items
      // 加载完毕再开启
      isLoading.value = false
    }
    // 监听路由上的id
    watch(
      () => {
        return route.params.id
      },
      () => {
        // 初始化参数
        reqParams.page = 1
        reqParams.pageSize = 20
        reqParams.categoryId = route.params.id
        loadData()
      },
      { immediate: true }
    )
    // 监听请求参数发生变化时
    watch(
      () => {
        return filterData
      },
      () => {
        // 把filterData数据处理一下 不要id
        // console.log('我是修改后的数据', filterData)
        // console.log(typeof filterData.attrs)
        const res = filterData.attrs.map((item) => {
          // console.log(item)
          return {
            propertyName: item.propertyName,
            groupName: item.groupName,
            isClass: item.isClass // 控制是否添加active
          }
        })
        // 合并数组 以父组件中的最新数据为准
        reqParams = { ...reqParams, ...res }
        // 重置为1
        reqParams.page = 1
        loadData()
      },
      { deep: true }
    )
    // 加载
    async function loadNextPage () {
      // 开始加载
      isLoading.value = true
      // 页码加一
      reqParams.page++
      // 发送请求
      const res = await findSubCategoryGoods(reqParams)
      // 新请求回来的数组把之前的数组覆盖
      goodList.value = [...goodList.value, ...res.result.items]
      // 关闭加载
      isLoading.value = false
      if (res.result.items.length === 0) isFinished.value = true
    }
    return {
      goodList,
      isLoading,
      isFinished,
      loadNextPage
    }
  }
}
</script>

<style lang="less" scoped>
.sort-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
  }
  p {
    padding-top: 10px;
  }
  .name {
    font-size: 16px;
  }
  .desc {
    color: #999;
    height: 29px;
  }
  .price {
    color: @priceColor;
    font-size: 20px;
  }
}
</style>
